<template>
  <div class="place-layout">
    <div class="header">
      <span>yu liu</span>
    </div>
    <div class="layout">
      <img
        class="travel"
        ref="imgRef"
        src="/travel.jpeg"
        alt="Travel Scene"
        @load="drawCtxSrc"
        title="This is a Travel"
      />
    </div>
    <div class="dtl-style">
      <canvas width="800" height="600" ref="canRef"></canvas>
    </div>
    <div ref="display" class="display-layout"></div>
    <div class="smile-style">
      <ImageView
        url="/travel.jpeg"
        :width="800"
        :height="600"
        :image-props="{ x: 1, y: 8, images: splitVals }"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { throttle } from "@/utils/index.js";
import ImageView from "@/components/image-view";

const imgRef = ref(null);
const canRef = ref(null);
const display = ref(null);
const numberX = 5;
const numberY = 5;
const splitVals = ref([]);

function drawCtxSrc() {
  const ctx = canRef.value.getContext("2d", {
    willReadFrequently: true,
  });
  ctx.drawImage(imgRef.value, 0, 0, 800, 600);
  nextTick(() => drawImgSplit(ctx, 0, 0, 800, 600));
}

function cptValCreate(total, n) {
  return {
    unitVal: total / n,
    list: Array.from({ length: n }, (v, i) => (total * i) / n),
  };
}

function dtlExecuteShell(wtVal, x, hgVal, y, callback) {
  const dxSplit = cptValCreate(wtVal, x);
  const dySplit = cptValCreate(hgVal, y);
  for (const n of dySplit.list) {
    for (const v of dxSplit.list) {
      callback(v, n, dxSplit.unitVal, dySplit.unitVal);
    }
  }
}

function drawImgSplit(ctx) {
  const wtVal = 800;
  const hgVal = 600;
  const targetVal = [];
  dtlExecuteShell(wtVal, 1, hgVal, 8, (x, y, width, height) => {
    const part = ctx.getImageData(x, y, width, height);
    const h = document.createElement("canvas");
    h.width = width;
    h.height = height;
    const pl = h.getContext("2d");
    pl.putImageData(part, 0, 0);
    const img = document.createElement("img");
    img.style.width = `${width}px`;
    img.style.height = `${height}px`;
    img.src = h.toDataURL("image/jpeg");
    nextTick(() => {
      display.value.appendChild(img);
    });
    targetVal.push({
      x: x,
      y: y,
      url: h.toDataURL("image/jpeg"),
    });
  });

  splitVals.value = targetVal;

  clear2draw(ctx, targetVal);
}

function clear2draw(ctx, list) {
  ctx.clearRect(0, 0, 800, 600);

  nextTick(() => {
    for (const val of list) {
      const image = new Image();
      image.src = val.url;
      ctx.drawImage(image, val.x, val.y);
    }
  });
}

function cropImage(target, x, y, width, height) {
  const ctx = target.getContext("2d");
  const part = ctx.getImageData(x, y, width, height);
  // sx, sy, sWidth, sHeight
  // var c = document.createElement("canvas");
  // var ctx = c.getContext("2d");
  // c.width = width;
  // c.height = height;
  // ctx.rect(0, 0, width, height);
  // ctx.fillStyle = "white";
  // ctx.fill();
  // ctx.putImageData(targetctxImageData, 0, 0);
  // // imageData, dx, dy
  // // 创建img 块
  // var img = document.createElement("img");
  // img.src = c.toDataURL("image/jpeg", 0.92);
  // document.body.appendChild(img);
}

let rVal = 80,
  centreVal = [];
const helper = throttle((evt) => {
  const { offsetX, offsetY } = evt;
  // console.log(offsetX, offsetY);

  if (
    offsetX >= rVal &&
    800 - offsetX >= rVal &&
    offsetY >= rVal &&
    600 - offsetY >= rVal
  ) {
    centreVal = [offsetX, offsetY];
    const ctx = canRef.value.getContext("2d", {
      willReadFrequently: true,
    });
    ctx.clearRect(0, 0, 800, 600);

    ctx.rect(0, 0, 800, 600);
    ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
    ctx.fill();

    ctx.beginPath();
    // 在源图像外绘制新图像，只有源图像外的目标图像部分会被显示，源图像是透明的
    ctx.globalCompositeOperation = "destination-out";
    ctx.arc(offsetX, offsetY, rVal, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();

    // 设置在现有画布上绘制新的图形
    ctx.globalCompositeOperation = "destination-over";
    // 剪切图像，并在画布上定位被剪切的部分
    ctx.drawImage(imgRef.value, 0, 0, 800, 600);
  }
}, 0);

onMounted(() => {
  canRef.value.addEventListener("mousedown", () => {
    console.log(centreVal);
  });
  canRef.value.addEventListener("mousemove", helper);
});
</script>

<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
}

.layout {
  display: flex;
  margin-bottom: 20px;
}

.travel {
  width: 800px;
  height: 600px;
}

.place-layout {
  display: flex;
  flex-direction: column;
}

.dtl-style {
  display: flex;
}

.display-layout {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 20px 0;
}
</style>
